<template>
    <div class="container">
        <statistics-header header-title="隔 离 宾 馆 数 据 库"></statistics-header>
        <statistics-bar bar-type="isolationHotel" ref="statisticsBar"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
                    <dlq-search @search="search" search-type="2" :area-name="areaName"></dlq-search>
                </div>
                <!--<div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="700"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumns" :key="index">
<!--                        <Button type="info" @click="xiugai">修改</Button>-->
                    </vxe-table-column>
<!--                    <vxe-table-column field="place_type_name" title="操作" width="150" show-overflow>-->
<!--                        <template v-slot="{ row }">-->
<!--                        <vxe-button type="info" @click="xiugai(row)">修改</vxe-button>-->
<!--                </template>-->
<!--                    </vxe-table-column>-->
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
        <Modal
                width="1100px"
                v-model="modal1"
                title="修改"
                @on-ok="ok"
                @on-cancel="tian===false">
            <Row>
                <i-Col span="2" style="margin-top: 5px;margin-left: 5px;text-align:right">区县市：</i-Col>
                <i-Col span="9">
                    <i-Col span="9">
                        <Select v-model="quxian" style="width:200%">
                            <Option :value=item.name v-for="item in areaList" :key="item.name">{{item.name}}</Option>
                        </Select>
                    </i-Col>
                </i-Col>
                <i-Col span="3" style="margin-top: 5px;margin-left: 5px;text-align:right">单位：</i-Col>
                <i-Col span="9"><Input v-model="danwei" placeholder="Enter something..." style="width: 300px" /></i-Col>
            </Row>
            <Row style="margin-top: 10px;">
                <i-Col span="2" style="margin-top: 5px;margin-left: 5px;text-align:right">房间总数：</i-Col>
                <i-Col span="9"><Input v-model="fangjianzong" placeholder="Enter something..." style="width: 300px" /></i-Col>
                <i-Col span="3" style="margin-top: 5px;margin-left: 5px;text-align:right">正在使用房间数：</i-Col>
                <i-Col span="9"><Input v-model="fangjianing" placeholder="Enter something..." style="width: 300px" /></i-Col>
            </Row>
            <Row style="margin-top: 10px">
                <i-Col span="2" style="margin-top: 5px;margin-left: 5px;text-align:right">管理人员：</i-Col>
                <i-Col span="9"><Input v-model="guanliren" placeholder="Enter something..." style="width: 300px" /></i-Col>
                <i-Col span="3" style="margin-top: 5px;margin-left: 5px;text-align:right">管理人员数：</i-Col>
                <i-Col span="9"><Input v-model="guanlirenshu" placeholder="Enter something..." style="width: 300px" /></i-Col>
            </Row>
            <Row style="margin-top: 10px">
                <i-Col span="2" style="margin-top: 5px;margin-left: 5px;text-align:right">维护房间数：</i-Col>
                <i-Col span="9"><Input v-model="weihufangjian" placeholder="Enter something..." style="width: 300px" readonly  /></i-Col>
                <i-Col span="3" style="margin-top: 5px;margin-left: 5px;text-align:right">可接纳房间数：</i-Col>
                <i-Col span="9"><Input v-model="jienafangjian" placeholder="Enter something..." style="width: 300px" @on-blur="jisuan" /></i-Col>
            </Row>
            <Row style="margin-top: 10px">
                <i-Col span="2" style="margin-top: 5px;margin-left: 5px;text-align:right">状态：</i-Col>
                <i-Col span="9" >
                    <RadioGroup v-model="buttonSize" type="button">
                        <Radio :value=item.value v-for="item in anniu" :key="item.value">{{item.lable}}</Radio>
                    </RadioGroup>
                </i-Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
import {
  findglbgDetailList
  , updatefindglbgCounty } from '@/api/statistics-data-list'

import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
import DlqSearch from '@/components/search'
export default {
  components: { StatisticsBar, StatisticsHeader, DlqSearch },
  data () {
    return {
      /* aa: '0', */
      anniu: [],
      buttonSize: '',
      county: '',
      guanlirenshu: '',
      guanliren: '',
      jienafangjian: '',
      weihufangjian: '',
      fangjianing: '',
      fangjianzong: '',
      quxian: '',
      type: '',
      danwei: '',
      areaName: '',
      totalnum: 0,
      typeNumObj: [
      ],
      id: '',
      log_state: '',
      modal1: false,
      tian: false,
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '区县市',
          width: 150,
          tooltip: true,
          key: 'county',
          align: 'center'
        },
        {
          title: '单位',
          key: 'company',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '房间总数',
          key: 'zs',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '正在使用房间数量',
          key: 'num_sy',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '可接纳房间数量',
          key: 'num_ky',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '维护房间数量',
          key: 'num_wh',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '状态',
          key: 'type',
          tooltip: true,
          width: 200,
          align: 'center',
          render: (h, params) => {
            console.log(params.row.type, 88)
            let state = params.row.type
            if (state === '0') {
              state = '启动'
            } else if (state === '1') {
              state = '停用'
            }
          }
        },
        {
          title: '管理人员数量',
          key: 'num_gl',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '管理人员',
          key: 'num_info',
          tooltip: true,
          width: 100,
          align: 'center'
        }
      ],
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  computed: {},
  mounted () {
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.isolationHotelAction(this.$route.query.areaName)
      this.init({ county: this.areaName })
    } else {
      this.init()
    }
  },
  methods: {
    ok () {
      alert(this.buttonSize)
      let data = {
        num_info: this.guanliren,
        num_gl: this.guanlirenshu,
        county: this.quxian,
        company: this.danwei,
        zs: this.fangjianzong,
        num_sy: this.fangjianing,
        num_ky: this.jienafangjian,
        num_wh: this.weihufangjian,
        type: this.buttonSize,
        id: this.id
      }
      updatefindglbgCounty(data).then(ret => {

      })
      this.tian = false
    },
    jisuan () {
      this.weihufangjian = this.fangjianzong - this.fangjianing - this.jienafangjian
    },
    xiugai (row) {
      this.modal1 = true
      // console.log(row, '1')
      if (row.type === '0') {
        this.anniu = [{ lable: '停用', value: '1' }]
      } else if (row.type === '1') {
        this.anniu = [{ lable: '启动', value: '0' }]
      }
      console.log(this.type, '1')
      this.id = row.id
      console.log(this.areaList, '数据')
      this.quxian = row.county
      console.log(this.quxian, '数据1')
      this.danwei = row.company
      this.fangjianzong = row.zs
      this.fangjianing = row.num_sy
      this.weihufangjian = row.num_wh
      this.jienafangjian = row.num_ky
      this.guanliren = row.num_info
      this.guanlirenshu = row.num_gl
    },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.isolationHotelAction(value.county)
      if (value.county === '全市') {
        this.init()
      } else {
        this.init(value)
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // county: '大东区',
        ...data
      }
      this.tableLoading = true
      findglbgDetailList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].num_wh = parseInt(data.data.results[i].zs) - parseInt(data.data.results[i].num_sy) - parseInt(data.data.results[i].num_ky)
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .sub-menu {
        background-color: #052f6b;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
    }
    .sub-menu>.total {
        font-size: 18px;
    }
    .sub-menu>.total>span {
        color: lightcoral;
        font-weight: 700;
        margin: 0 3px;
    }
    .btn-group {
        display: flex;
    }
    .btn-group>Button {
        margin-left: 10px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .menu {
        /*border: 1px solid white;*/
        border-radius: 5px;
        padding: 8px 20px;
        font-size: 18px;
    }

    .menu-item {
        cursor: pointer;
    }
    .statistics-group {
        width: 100%;
        padding: 10px;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;

    }
    .item-style1{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style2{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .item-style3{
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .item-style4{
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .item-style5{
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .item-style6{
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
</style>
